<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: 2D Lagrange Interpolation</h1>


        <script id='csmove' type='text/x-cindyscript'>
            pts=[A.xy,B.xy,C.xy,D.xy,E.xy,F.xy];

            xs=apply(pts,p,p_1);
            ys=apply(pts,p,p_2);
            n=length(pts);
            ts=1..n;


            f(t,k):=product(1..n--[k],j,t-ts_j);
            px(t,i):=f(t,i)/f(ts_i,i)*xs_i;
            py(t,i):=f(t,i)/f(ts_i,i)*ys_i;

            px(t):=sum(1..n,r,px(t,r));
            py(t):=sum(1..n,i,py(t,i));

            plot((px(t),py(t)),start->1, stop->n,steps->100,size->4,color->(.9,0,0));


        </script>


        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>

        <script type="text/javascript">

            var gslp=[

                      {name:"A", type:"Free", pos:[0,-8],color:[1,1,1]},
                      {name:"B", type:"Free", pos:[0,-1.5],color:[1,1,1]},
                      {name:"C", type:"Free", pos:[2,2],color:[1,1,1]},
                      {name:"D", type:"Free", pos:[-2,2.5],color:[1,1,1]},
                      {name:"E", type:"Free", pos:[-5,0.5],color:[1,1,1]},
                      {name:"F", type:"Free", pos:[-2,1.5],color:[1,1,1]},
                                           ];
            CindyJS({canvasname:"CSCanvas",
                        movescript:"csmove",
                        geometry:gslp});

        </script>

	</body>
</html>
